@import '../global.less';

.tab {
  margin: 0 10px 10px;

  .tab-title {
    border-bottom: 1px solid @border-color;

    &::after {
      .cl();
    }
  }

  .tab-item {
    float: left;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    cursor: pointer;
    background-color: @bg-color;
    border: 1px solid @border-color;
    border-bottom-width: 0;
    border-right-width: 0;

    &:first-child {
      border-radius: @radius 0 0 0;
    }

    &:last-child {
      border-right-width: 1px;
      border-radius: 0 @radius 0 0;
    }

    &:hover {
      font-weight: 600;
    }

    &.tab-active {
      margin-bottom: -1px;
      font-weight: 600;
      border-bottom: 1px solid transparent;
      background-color: #fff;
    }
  }

  .tab-content {
    border: 1px solid @border-color;
    border-top-width: 0;

    .tab-active {
      display: block;
    }
  }

  .tab-list {
    display: none;
    padding-top: 20px;
  }

  .tab-other {
    padding-top: 20px;

    .section {
      margin-bottom: 20px;
    }

    .el-form {
      padding-left: 20px;
    }
  }
}
